<template>
  <a-modal :open="true" :width="680" title="查看" :footer="null">
    <a-descriptions :column="2" :label-style="{ fontWeight: 600 }">
      <a-descriptions-item v-for="item of computedItems" :key="item.dataIndex" :label="item.title">
        {{ getItemText(item) }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script setup lang="ts">
import type { IColumn } from '@/types';

type IFormState = Record<string, unknown>;

const props = defineProps({
  items: { type: Array as PropType<IColumn[]>, default: () => [] },
  formData: { type: Object as PropType<IFormState>, default: () => ({}) },
  /**
   * 过滤表单项的方法，可以根据表单数据进行联动处理
   */
  filterFormItems: {
    type: Function as PropType<(cols: IColumn[], formState: IFormState) => IColumn[]>,
  },
});

const computedItems = computed(() => {
  const cols = props.items.filter(item => item.dataIndex !== 'action');
  if (props.filterFormItems) {
    return props.filterFormItems(cols, props.formData);
  }
  return cols;
});

const getItemText = (item: IColumn) => {
  const text = props.formData[item.dataIndex];
  if (item.customRender) {
    // @ts-ignore
    const result = item.customRender({ text, record: props.formData });
    if (typeof result === 'string') {
      return result;
    }
  }
  if (item.type === 'boolean') {
    return text ? item.switchLabels?.[0] : item.switchLabels?.[1];
  }
  if (item.type === 'enum') {
    return item.options?.find(o => o.value === text)?.label;
  }
  return text;
};
</script>
